<!-- 另外一个交货要求模板，开需求要哪个 -->

<!-- 交货要求动态控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <div
      v-for="(outerItem, outerIndex) in props.props.deliveryRequirementsBC"
      :key="outerIndex"
      :style="{
        marginBottom: '20px',
      }"
    >
      <a-form :model="outerItem" :rules="rules" auto-label-width>
        <a-row
          :gutter="16"
          v-for="(innerItem, innerIndex) in outerItem.production"
          :key="innerIndex"
        >
          <a-col :span="12">
            <a-form-item field="productionName" label="产品名称：">
              <a-input
                placeholder="请输入产品名称"
                v-model="innerItem.productionName"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="productionNumber" label="产品数量：">
              <a-input-number
                :min="1"
                placeholder="请输入产品数量"
                v-model="innerItem.productionNumber"
                hide-button
              />
              <div
                :style="{
                  width: '80px',
                }"
              >
                <icon-plus
                  :style="{
                    margin: '0 10px',
                    color: '#165DFF',
                  }"
                  @click="addInnerItem(outerIndex, innerIndex)"
                />
                <icon-delete
                  :style="{
                    color: 'red',
                  }"
                  @click="delInnerItem(outerIndex, innerIndex)"
                />
              </div>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="date" label="交货时间：">
              <a-date-picker
                :style="{
                  width: '100%',
                }"
                show-time
                value-format="x"
                v-model="outerItem.date"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <div class="radio">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="ways" label="交货方式：">
                <a-radio-group :default-checked="1" v-model="outerItem.ways">
                  <a-radio :value="1">送货</a-radio>
                  <a-radio :value="2">客户提货</a-radio>
                  <a-radio :value="3">物流运输</a-radio>
                  <a-radio :value="4">快递</a-radio>
                  <a-radio :value="5">其他</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
      <div class="btn">
        <a-button
          type="outline"
          @click="addOuterItem(outerIndex)"
          :style="{
            marginRight: '20px',
          }"
          >添加交货要求</a-button
        >
        <a-button type="outline" @click="delOuterItem(outerIndex)"
          >删除交货要求</a-button
        >
      </div>
    </div>
  </a-space>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    computed,
    watchEffect,
    type WritableComputedRef,
  } from 'vue';
  import { cloneDeep } from 'lodash';
  import mitter from '@/utils/mitt';

  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      values: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  type production = {
    productionName: string; // 产品名称
    productionNumber: number | undefined; // 产品数量
  };

  type data = {
    date: string | number; // 交货日期
    ways: number; // 交货方式
    production: production[];
  };

  const emit = defineEmits(['update:values']);

  const form: WritableComputedRef<data[]> = computed({
    get() {
      return props.values;
    },
    set(val) {
      emit('update:values', val);
    },
  });
  const orginData = ref(); // 储存原始传过来的数据

  // let item: data = {
  //   date: '', // 交货日期
  //   ways: 1, // 交货方式
  //   production: [],
  // };

  // watchEffect(() => {
  //   form.value = [item];
  // });

  const rules = reactive({
    productionName: [
      {
        required: true,
        message: '请输入产品名称',
      },
    ],
    productionNumber: [
      {
        required: true,
        message: '请输入产品数量',
      },
    ],
    date: [
      {
        required: true,
        message: '请填写交货时间',
      },
    ],

    ways: [
      {
        required: true,
        message: '请选择交货方式',
      },
    ],
  });

  // 添加一小项
  const addInnerItem = (outerIndex: number, innerIndex: number) => {
    const item = {
      productionName: '',
      productionNumber: 0,
    };
    props.props.deliveryRequirementsBC[outerIndex].production.splice(
      innerIndex + 1,
      0,
      item
    );
  };

  // 删除一小项
  const delInnerItem = (outerIndex: number, innerIndex: number) => {
    if (props.props.deliveryRequirementsBC[outerIndex].production.length > 1)
      props.props.deliveryRequirementsBC[outerIndex].production.splice(
        innerIndex,
        1
      );
  };

  // 添加一条交货要求
  const addOuterItem = (index: number) => {
    let item: any = {
      date: '', // 交货日期
      ways: 1, // 交货方式
      production: [],
    };

    orginData.value.forEach((e: any) => {
      item.production.push({
        productionName: e.name,
        number: e.number,
        productionNumber: props.props.deliveryRequirementsBC.reduce(
          (prev: any, curr: any) => {
            const temp = curr.production.find(
              (item: any) => item.number === e.number
            );

            return prev - temp.productionNumber;
          },
          e.amount
        ),
      });
    });

    props.props.deliveryRequirementsBC.splice(index + 1, 0, cloneDeep(item));
  };

  // 删除一条交货要求
  const delOuterItem = (index: number) => {
    if (props.props.deliveryRequirementsBC.length > 1)
      props.props.deliveryRequirementsBC.splice(index, 1);
  };

  watchEffect(() => {
    mitter.on('materialRefresh', (res: any) => {
      const temp: any = [];

      orginData.value = res;

      temp[0] = {
        date: '', // 交货日期
        ways: 1, // 交货方式
        production: Array.from({
          length: res.length,
        }).map((item) => {
          return {
            productionName: '',
            productionNumber: undefined,
            number: '', // 产品编号,
          };
        }),
      };

      res.forEach((item: any, index: number) => {
        temp[0].production[index].productionName = item.name;
        if (
          !props.props.deliveryRequirementsBC[0].production[index]
            .productionNumber
        )
          temp[0].production[index].productionNumber = item.amount;
        temp[0].production[index].number = item.number;
      });

      props.props.deliveryRequirementsBC[0] = temp;
    });

    // mitter.on('materialRefresh', (res: any) => {
    //   res.forEach((item: any, index: number) => {
    //     temp[0].production[index].productionName = item.name;
    //     temp[0].production[index].productionNumber = item.amount;
    //   });
    // });
  });
</script>

<style scoped lang="less">
  .radio {
    :deep(.arco-form-item-content-wrapper) {
      width: 600px;
    }
  }
  :deep(.arco-form-item-content-flex) {
    margin-left: 10px;
  }

  .btn {
    text-align: center;
  }
</style>
